<template>
  <div class="header-tool flex">
  <div class="flex justify-content-end flex-wrap" style="width: 100%">
    <div style="text-align: right; margin-top: 20px;">实时数据更新时间 : {{refresh}}</div>
    <div style="margin-left: 20px; margin-top: 20px;">
      <el-button type="primary" icon="download" @click="exportExcel">分析指导建议</el-button>
      <el-button type="primary" icon="Switch" @click="openDatePicker">切换历史数据</el-button>
    </div>
  </div>
    <el-dialog top="400px" v-model="dialogVisible" title="请选择时间" width="380" :before-close="handleClose">
      <el-date-picker v-model="dateRange"
                      type="daterange"
                      format="YYYY-MM-DD"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="YYYY-MM-DD"
                     ></el-date-picker>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closedDialog">取消</el-button>
          <el-button type="primary" @click="confirmDialog">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import router from "@/router/index.js";
const { proxy } = getCurrentInstance();
const emit = defineEmits(['exportExcel', 'selectDate']);
import {useRequestAnimationFrame } from "@/hooks/useRequestAnimationFrame.js";
import { formatDate } from "@/utils/index.js";
const dialogVisible = ref(false);
const dateRange = ref(null); // 修改: 将 dateRange 初始化为 null
const refresh = ref(formatDate(new Date().getTime()));

const scheduledTask = () => {
  refresh.value = formatDate(new Date().getTime());

};
const { start, stop } = useRequestAnimationFrame(scheduledTask, 1000);

const handleClose = (done) => {
  done();
};
// 打开时间日期选择框
const openDatePicker = () => {
  // dateRange.value = null;
  dialogVisible.value = true;
};
// 关闭事件弹窗
const closedDialog = () => {
  dialogVisible.value = false;
  dateRange.value = null;
};

// 确认事件弹窗
const confirmDialog = () => {
  dialogVisible.value = false;
  emit('selectDate', dateRange.value);
  dateRange.value = null;
};

// 导出事件发射
const exportExcel = () => {
  // emit('exportExcel');
  router.push({ path: '/advise/guide' });
};




</script>
<style lang='scss' scoped>
.header-tool {

  padding: 0 20px;
}
.el-date-editor {
  --el-date-editor-width: 150px !important;
}
</style>
